<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 文本 -->
        <input type="text" v-model="lisa" @input="red">
        <br>
        <br>
        <input type="blue" v-model="check" @change="ends" placeholder="说点啥吧" value="">
        <br>
        <p id="test1">{{msg}}</p>
        <p>good</p>
        <p>lisa</p>
        
        <br>
        <!-- 单选 -->
        <input type="checkbox" id="jack" value="土笨笨+good nice" v-model="checkedNames">
        <label for="jack">土笨笨</label>
        <span>good nice: {{ checkedNames }}</span>
        <br>
        <br>
        <!-- 多选 -->
        <input type="radio" id="good" value="土笨笨+good nice" v-model="picked">
        <label for="good">土笨笨</label>
        <input type="radio" id="goods" value="土笨笨" v-model="picked">
        <label for="goods">good nice</label>
        <br>
        <span>你是:{{picked}}</span>
        <br>
        <!-- 选择框 -->
        <select v-model="green">
            <option disabled value="">操作</option>
            <option>good nice</option>
            <option>土笨笨</option>
            <option>土笨笨+good nice</option>
        </select>
        <br>
        <span>Lisa：{{green}}</span>
        <br>

    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                lisa: 'good nice',
                check: [],
                msg: "good nice",
                checkedNames:[],
                picked:'',
                green:''
            },
            methods: {
                red: function () {
                    console.log(this.lisa);
                },
                ends: function () {
                    console.log(this.check);
                },
            }
        })
        setTimeout("app.msg='等一下我OK'", 3000);
    </script>
</body>

</html>


